<!-- 查看详细评价，和MessBlank4搭配使用 -->
<script setup>
  import { ref } from 'vue'
  import MessBlank_4 from "./MessBlank_4.vue";
  const username =ref('Aprilll')
  const value=ref(4)
  const dialogVisible = ref(true)
</script>

<template>
    <el-dialog 
      v-model="dialogVisible"
      width="350px"
    >
      <el-row :align="middle">
        <!-- A部分: 头像和昵称在同一水平线上 -->
        <el-col :span="8" style="display: flex; align-items: center;">
          <el-avatar :src="avatar" :size="40" style="margin-bottom: 7px;" />
          <el-text tag="b" size="large" style="margin-left: 13px;margin-bottom: 7px;">{{ username }}</el-text>
        </el-col>
        
        <!-- 垂直分割线 -->
        <el-divider 
        direction="vertical" 
         style="width: 2px; height: 100opx;"
      />
  
        <!-- B部分: 信用评级和评分条在同一竖直线上 -->
        <el-col :span="14">
          <el-row style="display: flex; flex-direction: column; justify-content: center; height: 100%;">
            <!-- 垂直排列的信用评级和评分条 -->
            <span>信用评级</span>
            <el-rate
              v-model="value"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value} 分"
            />
          </el-row>
        </el-col>
      </el-row>
  
      <!-- 下方动态插入MessBlank_4 -->
      <MessBlank_4></MessBlank_4>
      
    </el-dialog>
  </template>

<style scoped>
.el-divider--vertical {
  height: 3em;
  border-width: 1px;
  border-color: black;
}
</style>